<template>
  <div id="user_certification">
    <div class="">
      <k-header headTitle="用户认证" rightTitle="跳过" v-if="nulls" @rightClick="skip()"></k-header>
      <k-header headTitle="用户认证" goBack="true" v-else></k-header>
    </div>
    <div class="certifi_list" :class="headIos?'side-fixd-ios':'side-fixed'">
      <group>
        <cell title="个人信息" class="basecompany"/>
        <cell title="姓名">
          <input type="text" solt="value" placeholder="请输入姓名" class='company_name' v-model="scalename" @change="changeCount()" />
        </cell>
        <cell title="身份证">
          <input type="text" solt="value" placeholder="请输入身份证" class='company_name' v-model="scalecard" @change="changeCount()" maxlength="18"/>
        </cell>
        <cell title="实名认证手机">
          <!-- <input type="text" solt="value" placeholder="请输入手机号" class='company_name' v-model="scaletel" @blur="changeCount()" /> -->
          <span solt="value">{{ scaletel }}</span>
        </cell>
      </group>
      <p class="notation">请确保认证信息无误,以免影响后续业务展开</p>
    </div>
    <div class="applygray" @click="prompt_tur()" :class="{ applyfor: applyt }">下一步</div>
    <!-- <div class="applygray" @click="prompt_tur()" :class="{ applyfor: applyt }">下一步</div>  -->
  </div>
</template>

<style scoped>
  ul,li {
    list-style: none;
  }
  .certifi_list {
    padding: 45px 0 0 0;
  }
  .side-fixd-ios {
    padding: 65px 0 0 0;
  }
  .basecompany {
    background-color: #f5f5f5;
  }
  .weui-cell {
    padding: 0 .8rem !important;
    height: 44px;
  }
  .company_name {
    text-align: right;
    border: none;
    outline: none;
  }
  .certifi_data_head {
    height: 44px;
    line-height: 46px;
    padding: 0 .8rem;
    font-size: 1.4rem;
    color: #808080;
  }
  .seach_prompt {
    position: relative;
  }
  .prompt_list {
    position: absolute;
    /* bottom: -40px; */
    right: .8rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    z-index: 10;
    box-shadow: #ccc 2px 4px 3px;
  }
  .active {
    display: none;
  }
  .prompt_list li {
    padding: .8rem 1.8rem;
  }
  .prompt_state {
    color: #6ce26c;
    margin-left: 2rem;
  }
  .applygray {
    width: 100%;
    height: 49px;
    background-color: #d8d8d8;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    text-align: center;
    line-height: 49px;
    font-size: 1.4rem;
  }
  .applyfor {
     background-color: #F89721;
  }
  .notation {
    color: #F89721;
    padding: .5rem 0 0 1rem;
  }
</style>

<script>
import kHeader from '../common/head'
import { Group, Cell } from 'vux'
import util from '../../libs/util'
export default {
  name: 'usercertification',
  data() {
    return {
      scalename: '',
      scalecard: '',
      scaletel: '',
      applyt: false, // 记录是否填写完成
      nulls: true,
      firstenter: false,  // 是否为第一次进入 false是第一次   零时变量
      headIos: false
    }
  },
  components: {
    kHeader,
    Group,
    Cell
  },
  methods: {
    prompt_true(ips) {
      console.log(ips);
      this.acstate = true;
      console.log(this.acstate);
    },
    changeCount() { // 校验用户认证是否全部填写
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if( this.scaletel && this.scalename && this.scalecard ){
        if(reg.test(this.scalecard)){
          this.applyt = true;
        }else {
          this.applyt = false;
          this.myTost('请输入正确身份证号码');
        }

      }else {
        this.applyt = false;
      }
    },
    prompt_tur() { // 提交确认
      let prompt = {}
      var that = this;
      prompt.realName = this.scalename;
      prompt.idCard = this.scalecard;
      prompt.mobile = this.scaletel;
      if(this.applyt){ // 判断是否点击可提交  防止未填写任何信息 用户点击操作
        let url = 'lblsapp-h5/v2/memberInfo/saveMemberInfo.json';
        util.ajax.post(url,prompt).then(function(stats){
          that.$router.push({ path: '/userEnterprise', query: { moths: 'one' } })
        }).catch(function(error){
          console.log(error);
        })
      }else{
        if(!this.scalename){
          this.myTost('请输入姓名');
        }else {
          if(!this.scalecard){
            this.myTost('请输入身份证号码');
          }
        }

      }
    },
    myTost(info){
      this.$vux.toast.show({
        type:'text',
        text: info,
        time:'1500',
        position:'middle',
        width:'15em'
      })
    },
    fetchDate: function() { // 监听路由变化判断返回与跳过（判断是否为首次进入）
      console.log(132);
      if (this.firstenter) {
        this.nulls = true;
      } else {
        this.nulls = false;
      }
    },
    skip: function() { // 跳过到首页
      var that = this;
      this.$vux.confirm.show({
        title: '',
        content: '是否要跳过认证',
        onShow () {

        },
        onHide () {

        },
        onCancel () {

        },
        onConfirm () {
          that.$router.push('/worker');
        }
      })
    }
  },
  created() {
    if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
      this.headIos = true;
    }
    this.scaletel = this.$cookie.get('mobole');
    console.log(this.$route.query.mobile);
    if(this.$route.query.mobile) {
      this.firstenter = true;
    }
    this.fetchDate();
  },
  watch: {
    // '$route': 'fetchDate'
  }
}
</script>


